<template>
  <div class="core-card">
    <div
      v-if="title"
      class="core-card_title"
      :class="large ? 'large' : ''"
      :style="{
        backgroundSize: $slots.leftExtra ? '83%' : '100%'
      }"
    >
      <span class="card_title_text">{{ title }}</span>
      <div class="leftArea">
        <slot name="leftExtra" />
      </div>
    </div>
    <div ref="contentRef" class="core-card_content">
      <div
        style="width: 100%;"
        :style="{
          height: panelHeight
        }"
      >
        <slot v-if="isMounted" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: { type: String, default: '' },
    large: { type: Boolean, default: false }
  },
  data() {
    return {
      isMounted: false,
      mainHeight: '100'
    };
  },
  computed: {
    panelHeight() {
      return this.mainHeight ? `${this.mainHeight}px` : '100%';
    }
  },
  mounted() {
    this.mainHeight = this.$refs.contentRef.clientHeight;
    this.$nextTick(() => {
      this.isMounted = true;
    });
  }
};
</script>
<style lang="scss" scoped>
@mixin bg-img($url) {
  background: {
    image: url($url);
    repeat: no-repeat;
    size: 100% 100%;
  }
}
.core-card {
  background-repeat: no-repeat;
  background-position: 0 0;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  padding-top: px(16);
  &.core-card__background {
    background: linear-gradient(90deg, rgba(0, 152, 240, 0.25), rgba(0, 37, 111, 0.25));
  }
  // width: 386px;
  .core-card_title {
    @include bg-img('~@/assets/image/card_title.png');
    background-size: 100% 100%;
    background-position: 0 0;
    margin: 0;
    font-size: px(22);
    letter-spacing: px(2);
    font-weight: bold;
    padding: 0 0 0px px(22);
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: px(34);
    z-index: 5;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: px(10);
    min-height: px(30);
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-right: px(10);
    .leftArea {
      position: absolute;
      right: px(7);
      bottom: px(8);
    }
    &.large {
      @include bg-img('~@/assets/image/card_title_large.png');
    }
    > span {
      // background: linear-gradient(180deg, #e1f4ff 0%, #6ce7ff 60%);
      // box-shadow: 0px 3px 6px 1px rgba(94, 222, 246, 0.45);
      // -webkit-background-clip: text;
      // color: transparent;
      position: absolute;
      font-family: youshebiao;
      font-weight: normal;
      left: px(37);
      top: px(-13);
    }
  }
  .core-card_content {
    height: calc(100% - px(16));
    background: linear-gradient(360deg, rgba(6, 28, 61, 0.76) 0%, rgba(3, 20, 49, 0.51) 100%);
    border: 1px solid rgba(54, 137, 198, 0.15);
    opacity: 0.85;
  }
}
</style>
